<template>
  <div class="a">
    <div class="b" style="border: 1px ridge">
      <el-col :span="1" v-for="(t, index) in types" :key="t" :offset="index > 1 ? 8 : 8">
        <br>
        <el-button @click="find(null,t.name)">{{t.name}}</el-button>
      </el-col>

    </div>
    <div class="c">
    <div style="margin: auto; width: 50%">
      <el-input placeholder="请输入书名！" v-model="Bname" class="input-with-select">
        <el-button style="background-color: #409EFF" slot="append" icon="el-icon-search" @click="find(Bname,null)"></el-button>
      </el-input>
    </div>
    <br/>
    <br/>
      <el-row>
        <br>
        <el-col :span="2" v-for="(o, index) in list" :key="o" :offset="index > 1 ? 1 : 1">
          <el-card :body-style="{ padding: '0px' }">
            <el-image :src="o.head" style="height: 100px"></el-image>
            <el-collapse>
              <span>{{o.name}}</span>
              <br>
              <el-popover placement="top-start" :title="o.name" width="200"
                          trigger="hover">
                <el-button slot="reference" style="width: 100%">详情</el-button>
                {{o.brief}}<br><br>
                单价： {{o.price}}元<br><br>
                作者：{{o.author}}<br><br>
                出版社: {{o.publisher}}
              </el-popover>
              <br>
              <el-link icon="el-icon-shopping-cart-2" type="primary" @click="gwc(o)" style="font-size: 16px">点击购买</el-link>
            </el-collapse>
          </el-card>
          <br><br>
        </el-col>
      </el-row>
      <el-dialog :v-bind=book   :visible.sync="zhucs0how" width="35%" :before-close="handleClose"  @close="colse()">
        <div v-show="xia">
          <el-image :src="book.head" style="height: 250px;width: 200px"></el-image><br>
          <span style="font-size: 19px;font-weight: bold">  {{book.name}}    {{book.aname}} </span>

          <br><span style="font-size: 18px">{{book.price}} 元  </span>
          <br><br><br><br>
          <template>
            <el-input-number v-model="num" @change="aa(num)" :min="1" :max="10" placeholder="描述文字"></el-input-number>
          </template>
          &nbsp;&nbsp;<template>
          <el-popconfirm title="确定付款吗？" @confirm="addorder()" @cancel="addorder2()">
            <el-button slot="reference" icon="el-icon-mouse"  type="primary" >点击购买</el-button>
          </el-popconfirm>
        </template>
          <el-button @click="addgwc()" type="success" icon="el-icon-shopping-cart-1">添加购物车</el-button>
        </div>
        <el-steps v-show="steps" :active="active" finish-status="success">
          <el-step :title=a1></el-step>
          <el-step title="选择收货信息"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <div v-show="A1">
          <el-image :src="book.head" style="height: 250px;width: 200px"></el-image><br>
          {{book.name}}     x{{num}}<br>
          <br><br>
          一共要支付 {{book.price}} 元
        </div>
        &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
        <div v-show="A2">
          <template>
            <el-select v-model="fsite.id" placeholder="请选择" style="width: 300px" @change="change(fsite.id)">
              <el-option v-for="item in fsite" :key="item.id" :label="item.aa" :value="item.id">
                <!--                    {{item.province}}   {{item.city}}   {{item.district}}   {{item.address}}-->
              </el-option>
            </el-select>
          </template>
          <el-button @click="addorders()" icon="el-icon-thumb" type="primary" v-show="ad">确定购买</el-button>
        </div>
        <div v-show="A3">
          <h1>您的快递信息将会通过账号绑定的手机号通知</h1>
        </div>
        <el-button type="primary" :icon="s" v-show="stepss" style="margin-top: 12px;" @click="next()" v-text="setbu"></el-button>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import store from "@/util/store";
import moment from "moment";

export default {
  name: "Book",
  created() {
    this.find();
    this.findsite();
    this.typeFind();
    this.user();
  },
  data(){
    return{
      list:{},
      book:{},
      zhucs0how:false,
      xia:true,
      yy:0,
      num:1,
      s:'el-icon-right',
      a1:'购买信息',
      A1:false,
      A2:false,
      A3:false,
      ad:false,
      setbu:'下一步',
      steps:false,
      stepss:false,
      active:0,
      fsite:{},
      siteid:0,
      forderp:{},
      fcart:{},
      fuser:[],
      dialogVisible: false,
      Bname:'',
      type:'',
      types:{}
    }
  },
  methods:{
    find(Bname,type) {
      this.$http.post("/frontservice/book/find",{bName:Bname,type:type}).then(data => {
        console.log(data.data)
        if (data.data==""){
          alert("该类型不存在！")
          this.find()
        }
          this.list = data.data;
      })
    },
    typeFind(){
      this.$http.post("/frontservice/type/find").then(data => {
        console.log(data.data)
        this.types = data.data;
      })
    },
    gwc(o){
      let loginUser=sessionStorage.getItem('token')
      loginUser=this.$qs.parse(loginUser)
      if (loginUser.uid!=null ){
        this.zhucs0how=true
        this.yy=o.price
        this.book=o
      }else {
        alert("登录可以购买")
      }
    },aa(val){
      if (val!=0){
        this.book.price=this.yy*val
      }
    },addorder(){
      this.xia = false;
      this.steps = true;
      this.A1 = true;
      this.stepss = true
    },next(){
      this.active++
      if (this.active>0) {
        this.A1 = false
        this.A2 = true
        this.stepss = false
      }
      if (this.active>1){
        this.A2=false
        this.A3=true
        this.stepss=true
        this.setbu='点击退出'
      }
      if (this.active>2){
        this.$router.go(0)
      }
    },findsite(){//查该用户的收货地址
      let f_user=this.$store.state.user
      console.log("ddd")
      this.$http.post('/frontservice/site/find', {f_user}).then(data => {
        this.fsite = data.data
      })
    },change(id){//选择地址下拉框改变
      if (id!=null){
        this.ad=true;
        this.siteid=id
      }
    },addorders(){
      console.log(this.book)
      this.next()
      this.forderp.id=0
      this.forderp.book=this.book.id
      this.forderp.num=this.num
      this.forderp.price=this.yy
      this.forderp.zongjia=this.book.price
      this.forderp.f_user=this.$store.state.user
      this.forderp.f_site=this.siteid
      this.forderp.state=0
      let  date= new Date()
      let dates=moment(date).format('YYYY-MM-DD HH:mm:ss')
      this.forderp.gtime=dates
      this.$http.post("/frontservice/forderss/add",this.forderp).then(data=> {

      });
    },addgwc(){
      this.fcart.id=0
      console.log(this.$store.state.user)
      this.fcart.f_user=this.$store.state.user
      this.fcart.number=this.num
      this.fcart.prices=this.book.price
      this.fcart.book=this.book.id
      let  date= new Date()
      let dates=moment(date).format('YYYY-MM-DD HH:mm:ss')
      this.fcart.time=dates
      this.$http.post("/frontservice/fcart/add",this.fcart).then(data=>{
     if (data.data!=null){
       alert("添加购物车成功")
     }
      })
    },
    fuserupdate(row){
      this.$http.post("/frontservice/fuser/update",row).then(data=>{
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(done) {
      this.$confirm('确认取消？')
        .then(_ => {
          done();
          this.$router.go(0)
          this.find()
          this.num=1
          this.book.price=this.list.price
        })
        .catch(_ => {
        });
    },order(){
      this.$router.push("/order")
    }
  }
}
</script>

<style scoped>
div{
  /*border: red solid 1px;*/
}
.a{
  width: 100%;
  height: 100%;
}
.b{
  width: 15%;
  height: auto;
  float: left;
}
.c{
  width: 78%;
  height: 100%;
  float: left;
}
</style>
